<template>
  <div>
    <div class="eform-page-header">
      <div class="hd-left">
        <a-icon type="left" class="icon-pic" @click="$router.go(-1)" />
        <span class="eform-back-title"
          >创建{{
            titleType == 1 ? '销售采单' : titleType == 2 ? '课后活动报名' : titleType == 3 ? '问卷调查' : ''
          }}</span
        >
      </div>
      <div class="hd-right">
        <a-button style="margin-right: 10px" @click="LookPreview">预览</a-button>
        <a-button type="primary" @click="save">保存</a-button>
      </div>
    </div>
    <div class="container-box">
      <div class="left-container">
        <div class="pd24 scroll-y">
          <div class="choose-title">
            固定字段
            <!-- <a-icon type="question-circle" theme="filled" style="font-size:14px;"/> -->
          </div>

          <div
            :class="item.flag ? 'disable choosed-item' : 'choose-item'"
            v-for="(item, index) in fixedType"
            :key="index"
            @click="chooseType(item, index)"
            @mouseenter="fixedenter(item, index)"
            @mouseleave="fixedleave"
          >
            <a-icon :type="item.iconType" style="margin-right: 8px" />
            {{ item.name }}
          </div>

          <div class="choose-title">自定义字段</div>
          <!-- 文本字段 -->

          <div
            class="choose-item"
            v-for="(item, index) in textArr"
            :key="index + 10"
            @click="addText(item, index)"
            @mouseenter="textenter(item, index)"
            @mouseleave="fixedleave"
          >
            <span :class="item.icon_type" class="iconfont" style="margin-right: 8px" />
            {{ item.name }}
          </div>
          <span class="divide-line"></span>
          <!-- 单选多选字段 -->
          <div
            class="choose-item"
            v-for="(item, index) in selectArr"
            :key="index + 20"
            @click="addSelect(item, index)"
            @mouseenter="selectenter(item, index)"
            @mouseleave="fixedleave"
          >
            <span :class="item.icon_type" class="iconfont" style="margin-right: 8px; font-size: 14px" />
            {{ item.name }}
          </div>
          <span class="divide-line"></span>
          <!-- 段落描述字段 -->
          <div
            class="choose-item"
            v-for="(item, index) in sectionArr"
            :key="index + 30"
            @click="addsection(item, index)"
            @mouseenter="sectionenter(item, index)"
            @mouseleave="fixedleave"
          >
            <span :class="item.icon_type" class="iconfont" style="margin-right: 8px" />
            {{ item.name }}
          </div>
        </div>
        <div class="enter" :style="{ top: leftenterData.top + 'px' }" v-if="leftenterData.type == 1">
          <div class="pd24 enter-content" style="padding-bottom: 15px">
            <div style="margin-bottom: 10px">{{ leftenterData.title }}</div>
            <div v-if="leftenterData.field_type == 1" class="enter-input">请输入{{ leftenterData.title }}</div>
            <div v-if="leftenterData.field_type == 2">
              <a-radio-group>
                <a-radio :value="1">男</a-radio>
                <a-radio :value="2">女</a-radio>
              </a-radio-group>
            </div>
            <div v-if="leftenterData.field_type == 3" class="enter-input">请输入</div>
            <div v-if="leftenterData.field_type == 3" class="enter-tooltips">
              用于收集学员/家长的更多信息。如：身份证号，兴趣爱好等
            </div>
            <div v-if="leftenterData.field_type == 4" class="enter-input" style="height: 110px">请输入</div>
            <div v-if="leftenterData.field_type == 4" class="enter-tooltips">
              用于收集学员/家长的额外备注信息。如：对机构的建议等
            </div>
            <div v-if="leftenterData.field_type == 5">
              <a-radio-group>
                <a-radio :value="1" style="display: block; margin-bottom: 8px">选项1</a-radio>
                <a-radio :value="2" style="display: block; margin-bottom: 8px">选项2</a-radio>
                <a-radio :value="3" style="display: block; margin-bottom: 8px">选项3</a-radio>
              </a-radio-group>
            </div>
            <div v-if="leftenterData.field_type == 6">
              <a-checkbox-group>
                <a-checkbox value="1" style="display: block; margin-bottom: 8px; margin-left: 0">选项1</a-checkbox>
                <a-checkbox value="2" style="display: block; margin-bottom: 8px; margin-left: 0">选项2</a-checkbox>
                <a-checkbox value="3" style="display: block; margin-bottom: 8px; margin-left: 0">选项3</a-checkbox>
              </a-checkbox-group>
            </div>
            <div v-if="leftenterData.field_type == 7">
              <a-select style="width: 220px" placeholder="请选择"></a-select>
            </div>
            <div v-if="leftenterData.field_type == 8">
              <a-rate :disabled="true" />
              <div class="enter-tooltips">用于收集学员/家长对校区/服务/老师的评分</div>
            </div>
            <div v-if="leftenterData.field_type == 9">
              <div style="padding-bottom: 40px"></div>
              <div class="enter-tooltips">用于展示活动信息，课程内容，机构介绍等信息</div>
            </div>
            <div v-if="leftenterData.field_type == 10">
              <div
                style="
                  width: 80px;
                  height: 80px;
                  border: 1px dashed #e8e8e8;
                  font-size: 30px;
                  line-height: 80px;
                  text-align: center;
                "
              >
                +
              </div>
              <div class="enter-tooltips">用于收集学员/家长上传图片信息。如“孩子的照片”等</div>
            </div>
          </div>
        </div>
      </div>
      <div class="center-container">
        <div class="center-content">
          <!-- <div
            class="set-headerpic"
            @click="setHeadImg"
            v-if="!formContet.localhead&&!formContet.onlinehead"
          >点击设置头图</div>-->
          <div class="set-headerpic" @click="setHeadImg" v-if="!formContet.showHeadImg">点击设置头图</div>
          <img
            :src="formContet.showHeadImg"
            alt
            style="width: 100%; cursor: pointer; height: 350px"
            @click="setHeadImg"
          />

          <div class="view-form">
            
            <!-- 标题 -->
            <div
              class="view-form-item"
              :class="{ choose: titleIndex == index ? true : false }"
              v-for="(item, index) in formContet.titleArr"
              :key="index + 10"
              @click="titleClick(item, index)"
            >
              {{ item.name }}
            </div>
            <!-- 固定字段 -->
            <draggable v-model="formContet.centerArr" @end="onEnd">
            <div
              class="view-form-item"
              :class="{ choose: chooseIndex == index ? true : false }"
              v-for="(item, index) in formContet.centerArr"
              :key="index + 50"
              @click="chooseClick(item, index)"
            >
              <div>
                <div class="title-component">
                  <span class="required" v-if="item.flag">*</span>
                  <span class="title-text">{{ item.name }}</span>
                  <span class="title-text" v-if="item.type == 11">[多选]</span>
                </div>
                <div class="explain" v-if="item.explain">{{ item.explain }}</div>
                <!-- 学员姓名字段 -->
                <div v-if="item.type == 0">
                  <div class="input-primary">请输入学员姓名</div>
                </div>
                <!-- 手机号字段 -->
                <div v-if="item.type == 1">
                  <div class="input-primary">请输入手机号</div>
                </div>
                <div v-if="item.type == 2" class="sex-primary">
                  <a-radio-group name="radioGroup" :disabled="true">
                    <a-radio :value="1">男</a-radio>
                    <a-radio :value="2">女</a-radio>
                  </a-radio-group>
                </div>
                <div v-if="item.type == 3">
                  <div class="age-primary">请输入</div>
                  岁
                </div>
                <div v-if="item.type == 4">
                  <a-date-picker placeholder="请选择时间" :disabled="true" style="width: 252px" />
                </div>
                <div v-if="item.type == 5">
                  <div class="input-primary">请输入就读学校</div>
                </div>
                <div v-if="item.type == 6">
                  <div class="input-primary">请选择意向课程</div>
                </div>
                <div v-if="item.type == 7">
                  <div class="input-primary">请输入家庭住址</div>
                </div>
                <!-- 文本字段 -->
                <div class="input-primary" v-if="item.type == 8">请输入</div>
                <div
                  class="input-primary"
                  v-if="item.type == 9"
                  style="height: 110px; max-width: 640px; min-width: 500px"
                >
                  请输入
                </div>
              </div>
              <!-- 选择字段 -->
              <a-radio-group :disabled="true" v-if="item.type == 10">
                <a-radio
                  style="display: block; height: 30px"
                  :value="val.id"
                  v-for="(val, i) in item.manyRadio"
                  :key="i"
                  >{{ val.name }}</a-radio
                >
              </a-radio-group>
              <a-checkbox-group :disabled="true" v-if="item.type == 11">
                <a-checkbox
                  style="display: block; height: 30px; margin-left: 0"
                  :value="val.id"
                  v-for="(val, i) in item.manyRadio"
                  :key="i"
                  >{{ val.name }}</a-checkbox
                >
              </a-checkbox-group>
              <a-select :disabled="true" placeholder="请选择" style="width: 252px" v-if="item.type == 12"></a-select>
              <a-rate :disabled="true" :count="item.manycount" v-if="item.type == 13" />
              <!-- 段落 -->
              <div v-if="item.type == 14">
                <!-- <div v-for="(val, i) in item.describe" :key="i">
                  <div v-if="val.name" style="margin-bottom: 8px">{{ val.name }}</div>
                  <img v-if="val.imgurl" :src="val.imgurl" style="width: 223px; margin-bottom: 8px; display: block" />
                </div> -->
                <div v-html="item.editContent"></div>
              </div>
              <div v-if="item.type == 15">
                <div
                  style="
                    width: 80px;
                    height: 80px;
                    border-radius: 2px;
                    border: 1px dashed #e8e8e8;
                    line-height: 80px;
                    text-align: center;
                  "
                >
                  <a-icon type="plus" style="font-size: 22px; color: #bfbfbf" />
                </div>
              </div>
              <!--操作移动删除 -->
              <div v-if="chooseIndex == index ? true : false">
                <a-tooltip placement="right" v-if="index !== 0">
                  <template slot="title">上移</template>
                  <a-icon type="caret-up" class="up-icon" @click="moveUp(item, index)" />
                </a-tooltip>
                <a-tooltip placement="right" v-if="index !== formContet.centerArr.length - 1">
                  <template slot="title">下移</template>
                  <a-icon type="caret-down" class="down-icon" @click="moveDown(item, index)" />
                </a-tooltip>

                <a-tooltip placement="right">
                  <template slot="title">删除</template>
                  <a-icon type="delete" class="delete-icon" @click="deleteItem(item, index)" />
                </a-tooltip>
              </div>
            </div>
            </draggable>
          </div>
        </div>
      </div>
      <div class="right-container">
        <div v-if="formContet.rightArr != ''">
          <div class="pd24" v-for="(item, index) in formContet.rightArr" :key="index">
            <div
              v-if="
                item.type == 0 ||
                item.type == 1 ||
                item.type == 2 ||
                item.type == 3 ||
                item.type == 4 ||
                item.type == 5 ||
                item.type == 6 ||
                item.type == 7
              "
            >
              <div class="right-title">{{ item.name }}</div>
              <div class="right-tips">固定字段，不支持修改字段名称</div>
              <div>
                <span>说明</span>
                <a-tooltip>
                  <template slot="title">用于对字段进行一些附加说明，一般用来指导填写者输入。</template>
                  <a-icon type="question-circle" theme="filled" style="margin-left: 4px; color: #bfbfbf" />
                </a-tooltip>
              </div>
              <a-input placeholder="请输入说明内容 (选填)" class="right-input" v-model="item.explain" />

              <a-checkbox
                :defaultChecked="true"
                :disabled="item.status == 0 && titleType == 1 ? true : false"
                v-model="item.flag"
              >
                必填项
                <a-tooltip>
                  <template slot="title">设为必填后，学员在报名时必须填写此字段。</template>
                  <a-icon type="question-circle" theme="filled" style="font-size: 14px" />
                </a-tooltip>
              </a-checkbox>
            </div>
            <div v-if="item.type == 8 || item.type == 9">
              <div class="right-title" v-if="item.type == 8">单行文本</div>
              <div class="right-title" v-if="item.type == 9">多行文本</div>
              <div>
                <span>字段名称</span>
                <a-tooltip>
                  <template slot="title">用于告诉学员此字段应该填写什么内容。</template>
                  <a-icon type="question-circle" theme="filled" style="margin-left: 4px; color: #bfbfbf" />
                </a-tooltip>
              </div>
              <a-input placeholder="请输入字段名称" class="right-input" v-model="item.name" />
              <div>
                <span>说明</span>
                <a-tooltip>
                  <template slot="title">用于对字段进行一些附加说明，一般用来指导填写者输入。</template>
                  <a-icon type="question-circle" theme="filled" style="margin-left: 4px; color: #bfbfbf" />
                </a-tooltip>
              </div>
              <a-input placeholder="请输入说明内容 (选填)" class="right-input" v-model="item.explain" />
              <a-checkbox :defaultChecked="true" :disabled="item.status == 0 ? true : false" v-model="item.flag">
                必填项
                <a-tooltip>
                  <template slot="title">设为必填后，学员在报名时必须填写此字段。</template>
                  <a-icon type="question-circle" theme="filled" style="font-size: 14px" />
                </a-tooltip>
              </a-checkbox>
            </div>
            <div v-if="item.type == 10 || item.type == 11 || item.type == 12 || item.type == 13">
              <div class="right-title" v-if="item.type == 10">单选</div>
              <div class="right-title" v-if="item.type == 11">多选</div>
              <div class="right-title" v-if="item.type == 12">下拉框</div>
              <div class="right-title" v-if="item.type == 13">评分</div>

              <div>
                <span>字段名称</span>
                <a-tooltip>
                  <template slot="title">用于告诉学员此字段应该填写什么内容。</template>
                  <a-icon type="question-circle" theme="filled" style="margin-left: 4px; color: #bfbfbf" />
                </a-tooltip>
              </div>
              <a-input placeholder="请输入字段名称" class="right-input" v-model="item.name" />
              <div>
                <span>说明</span>
                <a-tooltip>
                  <template slot="title">用于对字段进行一些附加说明，一般用来指导填写者输入。</template>
                  <a-icon type="question-circle" theme="filled" style="margin-left: 4px; color: #bfbfbf" />
                </a-tooltip>
              </div>
              <a-input placeholder="请输入说明内容 (选填)" class="right-input" v-model="item.explain" />
              <div v-if="item.manyRadio">
                <div style="margin-bottom: 8px">选项</div>
                <div v-for="(val, i) in item.manyRadio" :key="i">
                  <a-input
                    placeholder="选项"
                    style="width: 180px; margin-right: 5px; margin-bottom: 10px"
                    v-model="val.name"
                  />
                  <a-icon type="delete" @click="deleteOption(item, i)" />
                </div>
                <div class="operate-edit-item-add" @click="addOption(item, index)">+添加选项</div>
              </div>
              <div v-if="item.manycount">
                <div style="margin-bottom: 8px">满分</div>
                <a-radio-group v-model="item.manycount">
                  <a-radio-button :value="3" style="width: 83px; margin-bottom: 24px; text-align: center"
                    >3</a-radio-button
                  >
                  <a-radio-button :value="5" style="width: 83px; margin-bottom: 24px; text-align: center"
                    >5</a-radio-button
                  >
                  <a-radio-button :value="10" style="width: 83px; margin-bottom: 24px; text-align: center"
                    >10</a-radio-button
                  >
                </a-radio-group>
              </div>
              <a-checkbox :defaultChecked="true" :disabled="item.status == 0 ? true : false" v-model="item.flag">
                必填项
                <a-tooltip>
                  <template slot="title">设为必填后，学员在报名时必须填写此字段。</template>
                  <a-icon type="question-circle" theme="filled" style="font-size: 14px" />
                </a-tooltip>
              </a-checkbox>
            </div>
            <div v-if="item.type == 14">
              <div class="right-title">段落描述</div>
              <!-- <div v-for="(val, i) in item.describe" :key="i" style="margin-bottom: 30px">
                <div v-if="val.name">
                  <div style="margin-bottom: 8px">文本</div>
                  <a-textarea v-model="val.name" :rows="4" />
                </div>
                <div v-if="val.imgurl">
                  <div style="margin-bottom: 8px">图片</div>
                  <img :src="val.imgurl" style="width: 255px; height: 150px" />
                </div>
              </div>
              <div class="operate-select-area">
                <div class="operate-select-area-item" @click="addTextarea(item)">
                  <div class="operate-select-area-up">
                    <span class="iconfont icon-danhangwenben"></span>
                  </div>
                  <div class="text">添加文本</div>
                </div>
                
              </div> -->
              <div>
                <div class="operate-select-area-item" style="width: 80px; height: 80px;display:none;">
                  <a-upload :beforeUpload="beforeUpload" class="upload-list-inline" :showUploadList="false" >
                    <div
                      style="
                        width: 80px;
                        height: 80px;
                        line-height: 80px;
                        text-align: center;
                        border: 1px dashed #e8e8e8;
                        margin-bottom: 4px;
                      "
                      id="editonload"
                    >
                      <a-icon type="picture" style="font-size: 20px" />
                    </div>
                  </a-upload>
                  <div style="text-align: center; font-size: 14px; color: #666" >添加图片</div>
                </div>
                <quill-editor
                  v-model="item.editContent"
                  ref="QuillEditor"
                  :options="editorOption"
                  style="height: 200px"
                  @change="onEditorChange(item)" />
                <!-- </quill-editor> -->
              </div>
            </div>
            <div v-if="item.type == 15">
              <div class="right-title">图片上传</div>
              <div class="right-tips">学员上传时，最多支持上传9张</div>
              <div>
                <span>字段名称</span>
                <a-tooltip>
                  <template slot="title">用于告诉学员此字段应该填写什么内容。</template>
                  <a-icon type="question-circle" theme="filled" style="margin-left: 4px; color: #bfbfbf" />
                </a-tooltip>
              </div>
              <a-input placeholder="请输入字段名称" class="right-input" v-model="item.name" />
              <div>
                <span>说明</span>
                <a-tooltip>
                  <template slot="title">用于对字段进行一些附加说明，一般用来指导填写者输入。</template>
                  <a-icon type="question-circle" theme="filled" style="margin-left: 4px; color: #bfbfbf" />
                </a-tooltip>
              </div>
              <a-input placeholder="请输入说明内容 (选填)" class="right-input" v-model="item.explain" />
              <a-checkbox :defaultChecked="true" :disabled="item.status == 0 ? true : false" v-model="item.flag">
                必填项
                <a-tooltip>
                  <template slot="title">设为必填后，学员在报名时必须填写此字段。</template>
                  <a-icon type="question-circle" theme="filled" style="font-size: 14px" />
                </a-tooltip>
              </a-checkbox>
            </div>
            <!-- 设置表格标题 -->
            <div v-if="item.type == 16">
              <div class="right-title">标题</div>
              <div style="margin-bottom: 10px">标题</div>
              <a-textarea placeholder="请输入标题" :rows="4" v-model="item.name" />
            </div>
          </div>
        </div>

        <div v-else-if="formContet.rightHeadArr != ''">
          <div class="pd24">
            <div class="right-title">头像</div>
            <div class="mb8">自定义样式</div>
            <a-upload
              :beforeUpload="beforeUpload1"
              class="upload-list-inline"
              style="cursor: pointer"
              :showUploadList="false"
              v-if="!formContet.onlinehead"
            >
              <div class="add-head-pic-byself mb16">上传头像</div>
            </a-upload>
            <div
              class="add-head-pic-byself mb16"
              style="position: relative"
              v-else
              :class="10 == headIndex ? 'choose' : ''"
              @click="
                headIndex = 10
                formContet.showHeadImg = formContet.onlinehead
              "
            >
              <img :src="formContet.onlinehead" style="width: 100%; height: 100%; display: block; cursor: pointer" />
              <!-- <a-icon type="close" class="delete-head-pic" @click="deleteHead"/> -->
              <a-icon type="close-circle" class="delete-head-pic" @click.stop="deleteHead" theme="filled" />
            </div>
            <div class="mb8">请选择头像样式</div>
            <div
              class="use-no-headpic"
              v-for="(item, index) in formContet.rightHeadArr"
              :key="index"
              @click="chooseImg(item, index)"
              :class="{ choose: index == headIndex }"
            >
              <img :src="item.img" alt v-if="item.img" />
              <span v-else>不使用头像</span>
            </div>
          </div>
        </div>

        <div style="text-align: center" v-else>
          <img src="~@/assets/img/edit.png" style="width: 44px; height: 44px; margin-top: 149px" />
          <div style="font-size: 15px; color: #666; margin-top: 10px">请选择需要编辑的字段</div>
        </div>
      </div>
    </div>
    <!-- 预览 -->
    <a-modal
      title="活动预览"
      :visible="visible"
      :footer="null"
      :width="800"
      @cancel="visible = false"
      :bodyStyle="{ textAlign: 'center', padding: '0px' }"
    >
      <div class="phone">
        <div class="top">
          <span class="time-icon">14:58</span>
          <a-icon type="wifi" style="margin-left: 180px" />
          <span class="electric" style="margin-left: 4px">
            <img src="~@/assets/img/electric.png" alt />
          </span>
          <div class="title">{{ formContet.titleArr[0].name }}</div>
        </div>
        <iframe :src="url" v-if="visible" class="phoneIframe" frameborder="0"></iframe>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'
import { uploadPic } from '@/api/login'
import { formsCreate, formsEdit, formsUpdate, picUrl } from '@/api/marketing'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import draggable from 'vuedraggable'
export default {
  data() {
    return {
      editorOption: {
        placeholder: '请输入',
        modules: {
          toolbar: {
            container: [
              ['bold', 'italic', 'underline', 'strike'],
              // [{ size: ['small', false, 'large', 'huge'] }],
              [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
              [{ color: [] }, { background: [] }],
              ['image'],
            ],
            handlers: {
              image: (value)=>{
                if (value) {
                  console.log(456);
                  // document.querySelector('.upload-list-inline').click()
                  document.getElementById('editonload').click()
                } else {
                  this.quill.format('image', false)
                }
              },
            },
          },
        },
      },
      content: '',
      url: null,
      visible: false,
      titleType: 1,
      leftenterData: {
        type: 0, //控制显示隐藏
        top: 50,
        title: '学员姓名',
        field_type: undefined, //控制显示什么字段
      },
      fixedType: [
        {
          name: '学员姓名',
          flag: true,
          iconType: 'user',
        },
        {
          name: '手机号',
          flag: true,
          iconType: 'mobile',
        },
        {
          name: '性别',
          flag: false,
          iconType: 'usergroup-add',
        },
        {
          name: '年龄',
          flag: false,
          iconType: 'rise',
        },
        {
          name: '出生日期',
          flag: false,
          iconType: 'alert',
        },
        {
          name: '就读学校',
          flag: false,
          iconType: 'shop',
        },
        {
          name: '意向课程',
          flag: false,
          iconType: 'retweet',
        },
        {
          name: '家庭住址',
          flag: false,
          iconType: 'bg-colors',
        },
      ],

      formContet: {
        localhead: '',
        onlinehead: '',
        showHeadImg: '',
        rightHeadArr: [],
        titleArr: [{ name: '', type: 16 }],
        // content//输入类容
        centerArr: [
          {
            id: 0,
            name: '学员姓名',
            explain: '', //说明
            flag: true, //默认是否选中
            status: 0, //表单创建是否是必填项
            type: 0, //字段类型 学员姓名
          },
          {
            id: 1,
            name: '手机号',
            explain: '',
            flag: true,
            status: 0, //必填项
            type: 1, //字段类型,
            typePhone: 0, //是否是手机
          },
        ],
        rightArr: [],
      },
      headIndex: 0,
      chooseIndex: 10,
      titleIndex: 10,
      // 自定义字段
      textArr: [
        {
          name: '单行文本',
          icon_type: 'icon-danhangwenben',
        },
        {
          name: '多行文本',
          icon_type: 'icon--duohangwenben',
        },
      ],
      // 选择
      selectArr: [
        {
          name: '单选',
          icon_type: 'icon-danxuanxuanzhong',
        },
        {
          name: '多选',
          icon_type: 'icon-xuanze-duoxuan',
        },
        {
          name: '下拉框',
          icon_type: 'icon-xialakuangbiaodan',
        },
        {
          name: '评分',
          icon_type: 'icon-pingfen',
        },
      ],
      //段落
      sectionArr: [
        {
          name: '段落描述',
          icon_type: 'icon-duanlashuoming',
        },
        {
          name: '图片上传',
          icon_type: 'icon-ic_image_upload',
        },
      ],
      //图片
      fileList: [],
      hostUrl: null,
    }
  },
  mounted() {
    
  },
  components: {
    quillEditor,
    draggable
  },
  computed: {

  },
  methods: {
    onEnd(e){
      this.chooseIndex=e.newIndex
    },
    onEditorChange(data){
      console.log(data);
    },
    //预览
    LookPreview() {
      let parmars = {
        template_content: {
          formList: [],
          imgurl: '',
        },
      }
      parmars.name = this.formContet.titleArr[0].name
      parmars.template_content.formList = this.formContet.centerArr
      parmars.template_content.imgurl = this.formContet.showHeadImg
      parmars = JSON.stringify(parmars)
      this.url = this.hostUrl + `/h5/#/pages/eform/eform?preview=${parmars}`
      this.visible = true
    },
    //固定字段方法
    fixedenter(data, index) {
      // field_type //显示类型
      this.leftenterData.type = 1
      this.leftenterData.title = data.name
      if (index == 0 || index == 1 || index == 3 || index == 4 || index == 5 || index == 6 || index == 7) {
        this.leftenterData.field_type = 1 //
      } else {
        this.leftenterData.field_type = 2
      }
      if (index == 0 || index == 1) {
        this.leftenterData.top = 50
      }
      if (index == 2 || index == 3) {
        this.leftenterData.top = 100
      }
      if (index == 4 || index == 5) {
        this.leftenterData.top = 150
      }
      if (index == 6 || index == 7) {
        this.leftenterData.top = 200
      }
    },
    fixedleave() {
      this.leftenterData.type = 0
    },
    textenter(data, index) {
      this.leftenterData.title = '未命名'
      this.leftenterData.type = 1
      this.leftenterData.top = 315
      if (index == 0) {
        this.leftenterData.field_type = 3
      }
      if (index == 1) {
        this.leftenterData.field_type = 4
      }
    },
    selectenter(data, index) {
      this.leftenterData.title = '未命名'
      this.leftenterData.type = 1
      if (index == 0) {
        this.leftenterData.field_type = 5
        this.leftenterData.top = 382
      }
      if (index == 1) {
        this.leftenterData.field_type = 6
        this.leftenterData.top = 382
        this.leftenterData.title = '未命名[多选]'
      }
      if (index == 2) {
        this.leftenterData.field_type = 7
        this.leftenterData.top = 440
      }
      if (index == 3) {
        this.leftenterData.field_type = 8
        this.leftenterData.top = 440
      }
    },
    sectionenter(data, index) {
      this.leftenterData.type = 1
      this.leftenterData.top = 508
      if (index == 0) {
        this.leftenterData.title = '段落描述'
        this.leftenterData.field_type = 9
      }
      if (index == 1) {
        this.leftenterData.field_type = 10
        this.leftenterData.title = '图片上传'
      }
    },
    // textleave(){

    // },
    chooseType(data, index) {
      // console.log(data)
      if (data.flag == false) {
        data.flag = true
        this.fixedType.splice(index, 1, data)
        let len = Number(this.formContet.centerArr.length)
        this.chooseIndex = len
        if (index == 0) {
          this.formContet.centerArr.push({
            id: 0,
            name: '学员姓名',
            explain: '',
            flag: true,
            type: 0, //固定字段类型
          })
          this.formContet.rightArr = [this.formContet.centerArr[len]]
        }
        if (index == 1) {
          this.formContet.centerArr.push({
            id: 1,
            name: '手机号',
            explain: '',
            flag: true,
            type: 1, //固定字段类型
          })
          this.formContet.rightArr = [this.formContet.centerArr[len]]
        }
        if (index == 2) {
          this.formContet.centerArr.push({
            id: 2,
            name: '性别',
            explain: '',
            flag: true,
            type: 2, //固定字段类型
          })
          this.formContet.rightArr = [this.formContet.centerArr[len]]
        }
        if (index == 3) {
          this.formContet.centerArr.push({
            id: 3,
            name: '年龄',
            explain: '',

            flag: true,
            type: 3, //固定字段类型
          })
          this.formContet.rightArr = [this.formContet.centerArr[len]]
        }
        if (index == 4) {
          this.formContet.centerArr.push({
            id: 4,
            name: '出生日期',
            explain: '',
            flag: true,
            type: 4, //固定字段类型
          })
          this.formContet.rightArr = [this.formContet.centerArr[len]]
        }
        if (index == 5) {
          this.formContet.centerArr.push({
            id: 5,
            name: '就读学校',
            explain: '',

            flag: true,
            type: 5, //固定字段类型
          })
          this.formContet.rightArr = [this.formContet.centerArr[len]]
        }
        if (index == 6) {
          this.formContet.centerArr.push({
            id: 6,
            name: '意向课程',
            explain: '',

            flag: true,
            type: 6, //固定字段类型
          })
          this.formContet.rightArr = [this.formContet.centerArr[len]]
        }

        if (index == 7) {
          this.formContet.centerArr.push({
            id: 7,
            name: '家庭住址',
            explain: '',

            flag: true,
            type: 7, //固定字段类型
          })
          this.formContet.rightArr = [this.formContet.centerArr[len]]
        }
      }
    },
    chooseClick(data, index) {
      this.titleIndex = 10
      this.chooseIndex = index
      this.formContet.rightTitleArr = []
      this.formContet.rightArr = [data]
      // data.flag = !data.flag
      this.formContet.centerArr.splice(index, 1, data)
      console.log(this.formContet.rightArr, 'zzzzzzz')
    },
    setHeadImg() {
      this.formContet.rightHeadArr = []
      this.formContet.rightArr = []
      this.formContet.rightTitleArr = []
      this.getpicUrl()
      this.titleIndex=100
      this.chooseIndex=100
    },
    chooseImg(data, index) {
      this.headIndex = index
      console.log(data)
      if (data.img) {
        this.formContet.localhead = data.img
        this.formContet.showHeadImg = this.formContet.localhead
      } else {
        this.formContet.localhead = ''
        this.formContet.showHeadImg = ''
      }
    },
    beforeUpload1(file) {
      let isPicture =
        file.type === 'image/jpeg' ||
        file.type === 'image/png' ||
        file.type === 'image/svg' ||
        file.type === 'image/jpg' ||
        file.type === 'image/gif'
      if (!isPicture) {
        this.$message.error('只能上传图片！')
        return
      }
      let pictureSize = 10 * 1024 * 1024
      if (file.size > pictureSize) {
        this.$message.error('图片文件大于10M！')
        return
      }
      const formData = new FormData()
      formData.append('file', file)

      uploadPic(formData)
        .then((res) => {
          this.formContet.onlinehead = res.url
          this.formContet.showHeadImg = this.formContet.onlinehead
          this.headIndex = 10
          // this.fileName = file.name
          // this.musicVisible = true
        })
        .catch((err) => {
          this.$message.error(err.data.message || '上传失败,请检查上传文件或稍后重试')
        })
      return false
    },
    deleteHead() {
      this.formContet.onlinehead = ''
      this.formContet.showHeadImg = ''
      this.headIndex = 0
    },
    //标题点击
    titleClick(data, index) {
      console.log(data)
      this.chooseIndex = 10
      this.titleIndex = index
      this.formContet.rightArr = [data]
      // this.formContet.rightTitleArr = [data]
    },
    //上移动
    moveUp(data, index) {
      //  let newindex=index-1
      //  增加
      this.formContet.centerArr.splice(index - 1, 0, data)
      //删除
      this.formContet.centerArr.splice(index + 1, 1)
    },
    // 下移动
    moveDown(data, index) {
      this.formContet.centerArr.splice(index + 2, 0, data)
      this.formContet.centerArr.splice(index, 1)
    },
    deleteItem(data, index) {
      if (this.$route.query.id) {
        this.$message.warning('编辑不可删除')
        return
      }
      if (data.name == '学员姓名' && this.titleType == 1) {
        this.$message.warning('销售采单必选字段，不可删除')
        return
      } else if (data.name == '手机号' && this.titleType == 1) {
        this.$message.warning('销售采单必选字段，不可删除')
        return
      } else {
        // if (data.type == 2 || data.type == 3 || data.type == 4 || data.type == 5 || data.type == 6 || data.type == 7) {
        //   console.log(data.type);
        //   console.log(this.fixedType,11);
        //   this.fixedType[data.type].flag = false
        //   console.log(this.fixedType,22);

        // }
        this.fixedType.forEach((item) => {
          if (item.name == data.name) {
            item.flag = false
          }
        })

        setTimeout(() => {
          this.formContet.centerArr.splice(index, 1)
          this.formContet.rightArr = []
          this.$forceUpdate()
        }, 1)
      }
    },
    // 自定义字段
    // 文本
    addText(data, index) {
      let len = Number(this.formContet.centerArr.length)
      this.chooseIndex = len
      if (index == 0) {
        this.formContet.centerArr.push({
          id: 8,
          name: '未命名',
          explain: '',
          flag: true, //控制显示红星
          onetext: '请输入',
          type: 8, //文本类型
        })
        this.formContet.rightArr = [this.formContet.centerArr[len]]
      }
      if (index == 1) {
        this.formContet.centerArr.push({
          id: 9,
          name: '未命名',
          explain: '',
          flag: true, //控制显示红星
          onetext: '请输入',
          type: 9, //文本类型
        })
        this.formContet.rightArr = [this.formContet.centerArr[len]]
      }
    },
    //选择
    addSelect(data, index) {
      let len = Number(this.formContet.centerArr.length)
      this.chooseIndex = len
      if (index == 0) {
        this.formContet.centerArr.push({
          id: 10,
          name: '未命名',
          explain: '',
          flag: true, //控制显示红星
          manyRadio: [
            {
              id: 0,
              name: '选项1',
            },
            {
              id: 1,
              name: '选项2',
            },
            {
              id: 2,
              name: '选项3',
            },
          ],
          type: 10, //选择类型
        })
        this.formContet.rightArr = [this.formContet.centerArr[len]]
      }
      if (index == 1) {
        this.formContet.centerArr.push({
          id: 11,
          name: '未命名',
          explain: '',
          flag: true, //控制显示红星
          manyRadio: [
            {
              id: 0,
              name: '选项1',
            },
            {
              id: 1,
              name: '选项2',
            },
            {
              id: 2,
              name: '选项3',
            },
          ],
          type: 11, //选择类型
        })
        this.formContet.rightArr = [this.formContet.centerArr[len]]
      }
      if (index == 2) {
        this.formContet.centerArr.push({
          id: 12,
          name: '未命名',
          explain: '',
          flag: true, //控制显示红星
          manyRadio: [
            {
              id: 0,
              name: '选项1',
            },
            {
              id: 1,
              name: '选项2',
            },
            {
              id: 2,
              name: '选项3',
            },
          ],
          type: 12, //选择类型
        })
        this.formContet.rightArr = [this.formContet.centerArr[len]]
      }
      if (index == 3) {
        this.formContet.centerArr.push({
          id: 13,
          name: '未命名',
          explain: '',
          flag: true, //控制显示红星
          manycount: 5,
          type: 13, //选择类型
        })
        this.formContet.rightArr = [this.formContet.centerArr[len]]
      }
    },
    deleteOption(data, index) {
      data.manyRadio.splice(index, 1)
    },
    addOption(data, index) {
      console.log(index)
      data.manyRadio.push({
        name: '选项',
        id: '5',
      })
    },
    //段落
    addsection(data, index) {
      let len = Number(this.formContet.centerArr.length)
      this.chooseIndex = len
      if (index == 0) {
        this.formContet.centerArr.push({
          editContent:'',
          type: 14,
        })
        this.formContet.rightArr = [this.formContet.centerArr[len]]
      }
      if (index == 1) {
        this.formContet.centerArr.push({
          type: 15, //上传图片
          name: '未命名',
          explain: '',
          flag: true,
        })
        this.formContet.rightArr = [this.formContet.centerArr[len]]
      }
    },
    addTextarea(data) {
      data.describe.push({
        name: '段落描述',
      })
    },
    beforeUpload(file) {
      let isPicture =
        file.type === 'image/jpeg' ||
        file.type === 'image/png' ||
        file.type === 'image/svg' ||
        file.type === 'image/jpg' ||
        file.type === 'image/gif'
      if (!isPicture) {
        this.$message.error('只能上传图片！')
        return
      }
      let pictureSize = 10 * 1024 * 1024
      if (file.size > pictureSize) {
        this.$message.error('图片文件大于10M！')
        return
      }
      const formData = new FormData()
      formData.append('file', file)
      // 获取富文本组件实例
      let quill = this.$refs.QuillEditor[0].quill
      uploadPic(formData)
        .then((res) => {
         let length = quill.getSelection().index;
         quill.insertEmbed(length, 'image', res.url)
         quill.setSelection(length + 1)
        console.log(this.content);
          
        })
        .catch((err) => {
          this.$message.error(err.data.message || '上传失败,请检查上传文件或稍后重试')
        })
      return false
    },
    getImgUrl(e, data) {
      console.log(e)
      data.describe.push({
        imgurl: e,
      })
    },

    save() {
     
      if (this.$route.query.id) {
        let parmars = {
          formList: [],
          imgurl: '',
        }
        parmars.formList = this.formContet.centerArr
        parmars.imgurl = this.formContet.showHeadImg
        formsUpdate(this.$route.query.id, {
          name: this.formContet.titleArr[0].name,
          template_content: parmars,
        })
          .then((res) => {
            this.$message.success('编辑成功')
            this.$router.go(-1)
          })
          .catch((err) => {
            this.$message.error(err.data.message || '保存失败')
          })
      } else {
        let parmars = {
          template_content: {
            formList: [],
            imgurl: '',
          },
        }
        parmars.school_id = this.$store.state.user.school
        parmars.name = this.formContet.titleArr[0].name
        parmars.type = this.$route.query.type
        parmars.template_content.formList = this.formContet.centerArr
        parmars.template_content.imgurl = this.formContet.showHeadImg
        formsCreate(parmars)
          .then((res) => {
            this.$message.success('保存成功')
            this.$router.go(-1)
          })
          .catch((err) => {
            this.$message.error(err.data.message || '保存失败')
          })
      }
    },
    getpicUrl() {
      picUrl()
        .then((res) => {
          this.formContet.rightHeadArr.push({})
          res.forEach((item) => {
            this.formContet.rightHeadArr.push({ img: item })
          })
          if (this.formContet.showHeadImg) {
            this.formContet.rightHeadArr.forEach((item, index) => {
              if (item.img == this.formContet.showHeadImg) {
                this.headIndex = index
              }
            })
          }
        })
        .catch((err) => {
          this.$message.error(err.data.message || '获取')
        })
    },
  },
  // watch: {
  //   fileList: {
  //     handler(newdata) {
  //       this.formContet.centerArr.forEach((item) => {
  //         if (item.type == 14) {
  //           item.describe.push({
  //             imgurl: newdata[0],
  //           })
  //         }
  //       })
  //     },
  //     deep: true,
  //   },
  // },
  created() {
    let ishttps = 'https:' == document.location.protocol ? true : false
    if (ishttps) {
      this.hostUrl = 'https://' + window.location.host
    } else {
      this.hostUrl = 'http://' + window.location.host
    }
    if (this.$route.query.templateContent) {
      this.titleType = this.$route.query.type
      let parmars = JSON.parse(this.$route.query.templateContent)
      console.log(parmars)
      this.formContet.titleArr[0].name = parmars.name
      this.formContet.centerArr = parmars.formList
      this.formContet.showHeadImg = parmars.imgurl
      this.fixedType.forEach((item) => {
        this.formContet.centerArr.forEach((val) => {
          if (item.name == val.name) {
            item.flag = true
          }
        })
      })
    } else if (this.$route.query.id) {
      formsEdit(this.$route.query.id).then((res) => {
        this.formContet.centerArr = []
        this.titleType = res.type
        this.formContet.centerArr = res.template_content.formList
        if (res.template_content.imgurl) {
          this.formContet.showHeadImg = res.template_content.imgurl
        }
        this.formContet.titleArr[0].name = res.name
        this.fixedType.forEach((item) => {
          this.formContet.centerArr.forEach((val) => {
            if (item.name == val.name) {
              item.flag = true
            }
          })
        })
      })
    } else {
      this.titleType = this.$route.query.type
      this.formContet.titleArr[0].name = this.$route.query.title
    }
  },
}
</script>
<style>
p{
  margin: 0;
}
</style>
<style lang="less" scoped>
@import '~@/assets/img/customFormIcon/iconfont.css';

.mb16 {
  margin-bottom: 16px;
}
.mb8 {
  margin-bottom: 8px;
}
.pd24 {
  padding: 24px;
}
.eform-page-header {
  height: 50px;
  line-height: 50px;
  background: #242b49;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  .hd-left {
    display: flex;
    align-items: center;
    .icon-pic {
      font-size: 33px;
      margin-right: 3px;
      cursor: pointer;
      color: #ff8534;
    }
    .eform-back-title {
      color: #fff;
      font-size: 15px;
      &:before {
        content: '';
        border-left: 1px solid hsla(0, 0%, 100%, 0.4);
        margin-right: 12px;
      }
    }
  }
}
.container-box {
  display: flex;
  background: #f4f6fa;
  .left-container {
    box-sizing: border-box;
    width: 320px;
    background: #fff;
    position: relative;
    .scroll-y {
      overflow: auto;
      height: calc(100vh - 50px);
    }
    .enter {
      top: 5px;
      width: 400px;
      background: #f9fafb;
      -webkit-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.06);
      box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.06);
      position: absolute;
      left: 327px;
      border-radius: 5px;
      z-index: 99999;
      .enter-content {
        &:before {
          content: '';
          display: block;
          position: absolute;
          width: 0;
          border: 6px solid;
          border-color: transparent #fff transparent transparent;
          left: -12px;
          top: 30px;
        }
      }
      .enter-input {
        width: 252px;
        height: 32px;
        background: #fff;
        border-radius: 4px;
        border: 1px solid #e8e8e8;
        padding: 6px 12px;
        font-size: 14px;
        font-weight: 400;
        color: #ccc;
      }
      .enter-tooltips {
        font-size: 12px;
        color: #999;
        // background: #eef0f2;
        margin-top: 20px;
      }
    }
    .choose-title {
      font-size: 16px;
      color: #333;
      font-weight: 500;
      margin-bottom: 26px;
    }
    .choosed-item {
      width: 120px;
      height: 34px;
      line-height: 34px;
      padding-left: 14px;
      border-radius: 18px;
      color: #9a9da7;
      font-size: 16px;
      display: inline-block;
      margin-bottom: 18px;
      margin-right: 10px;
      cursor: pointer;
    }
    .choose-item {
      width: 120px;
      height: 34px;
      line-height: 34px;
      padding-left: 14px;
      border-radius: 18px;
      color: #9a9da7;
      font-size: 16px;
      display: inline-block;
      margin-bottom: 18px;
      margin-right: 10px;
      cursor: pointer;
      &:hover {
        background: #ff8534;
        color: #fff;
      }
    }
    .disable {
      background: #efefef;
    }
    .divide-line {
      display: block;
      border-bottom: 1px solid #eee;
      margin-bottom: 17px;
    }
  }
  .right-container {
    overflow: auto;
    height: calc(100vh - 50px);
    width: 300px;
    background: #fff;
    .pd24 {
      .add-head-pic-byself {
        border: 1px solid #e8e8e8;
        width: 245px;
        height: 78px;
        line-height: 78px;
        text-align: center;
        color: #ff8534;
        position: relative;
        border-radius: 2px;
        .delete-head-pic {
          position: absolute;
          top: -8px;
          right: -9px;
          font-size: 15px;
          color: #bfbfbf;
          cursor: pointer;

          border-radius: 50%;
        }
      }
      .use-no-headpic {
        width: 252px;
        height: 78px;
        padding: 2px;
        line-height: 78px;
        border: 1px solid #e8e8e8;
        border-radius: 2px;
        margin-bottom: 8px;
        text-align: center;
        cursor: pointer;
        img {
          width: 100%;
          height: 100%;
          vertical-align: middle;
          border-style: none;
          display: block;
        }
      }
      .choose {
        border: 2px solid #ff8534;
      }
      .right-title {
        font-size: 16px;
        color: #333;
        font-weight: 500;
        margin-bottom: 24px !important;
      }
      .right-tips {
        margin-top: -20px;
        margin-bottom: 24px;
        font-size: 12px;
        color: #999;
      }
      .right-input {
        margin-top: 8px;
        margin-bottom: 24px;
        padding-left: 12px !important;
      }
      .operate-edit-item-add {
        width: 180px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        border-radius: 4px;
        border: 1px dashed #e8e8e8;
        color: #ff8534;
        font-size: 14px;
        margin-bottom: 24px;
        cursor: pointer;
      }
      .operate-select-area {
        display: flex;
        justify-content: space-around;
        .operate-select-area-item {
          cursor: pointer;
          .operate-select-area-up {
            width: 80px;
            height: 80px;
            line-height: 80px;
            text-align: center;
            border: 1px dashed #e8e8e8;
            margin-bottom: 4px;
          }
          .text {
            text-align: center;
            font-size: 14px;
            color: #666;
          }
        }
      }
    }
  }
  .center-container {
    flex: 1;
    overflow: auto;
    height: calc(100vh - 50px);
    .center-content {
      padding: 24px 16px;
      .set-headerpic {
        text-align: center;
        font-size: 16px;
        color: #333;
        font-weight: 400;
        margin-bottom: 24px;
        position: relative;
        line-height: 22px;
        cursor: pointer;
        &:before {
          display: block;
          content: '';
          border-bottom: 1px dashed #333;
          position: absolute;
          width: calc(50% - 78px);
          left: 0;
          top: 11px;
        }
        &:after {
          display: block;
          content: '';
          border-bottom: 1px dashed #333;
          position: absolute;
          width: calc(50% - 78px);
          right: 0;
          top: 11px;
        }
      }
      .view-form {
        background: #fff;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.15);
        border-radius: 4px;
        padding-bottom: 24px;
        & > :nth-child(1) {
          text-align: center;
          line-height: 32px;
          font-size: 24px;
          padding: 40px 20px !important;
        }
        .choose {
          border: 1px dashed #fc9c6b;
        }
        .view-form-item {
          position: relative;
          cursor: pointer;
          padding: 24px 30px;
          min-height: 112px;
          background: #fff;
          width: 100%;

          &:hover {
            background: hsla(20, 96%, 70%, 0.2);
            cursor: move;
          }
          .title-component {
            margin-bottom: 10px;
            .required {
              color: #ff4f4f;
              font-size: 16px;
              margin-right: 4px;
            }

            .title-text {
              color: #333;
              font-size: 16px;
              font-weight: 500;
            }
          }
          .explain {
            margin-bottom: 8px;
            margin-top: -6px;
            color: #999;
          }
          .input-primary {
            width: 252px;
            height: 32px;
            background: #fff;
            border-radius: 4px;
            border: 1px solid #e8e8e8;
            padding: 6px 12px;
            font-size: 14px;
            font-weight: 400;
            color: #ccc;
          }
          .age-primary {
            width: 90px;
            height: 32px;
            background: #fff;
            border-radius: 4px;
            border: 1px solid #e8e8e8;
            padding: 6px 12px;
            font-size: 14px;
            font-weight: 400;
            color: #ccc;
            display: inline-block;
            margin-right: 8px;
            vertical-align: middle;
          }
          .up-icon {
            position: absolute;
            bottom: 30px;
            right: 12px;
            width: 18px;
            height: 18px;
          }
          .down-icon {
            position: absolute;
            bottom: 8px;
            right: 12px;
            width: 18px;
            height: 18px;
          }
          .delete-icon {
            position: absolute;
            top: 8px;
            right: 12px;
            width: 18px;
            height: 18px;
          }
        }
      }
    }
  }
}
.phone {
  display: inline-block;
  position: relative;
  width: 410px;
  height: 690px;
  padding: 54px;
  padding-top: 45px;
  box-sizing: border-box;
  background-image: url('~@/assets/img/phoneActivity.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: 50%;
  .top {
    height: 66px;
    width: 100%;
    line-height: 35px;
    border-radius: 35px 35px 0 0;
    background: linear-gradient(1turn, #2c2d31, #101013);
    text-align: left;
    color: #fff;
    .title {
      text-align: center;
      position: relative;
      top: -5px;
    }
    .time-icon {
      display: inline-block;
      margin-left: 20px;
      width: 38px;
      font-size: 11px;
    }
    .electric {
      margin-left: 4px;
      position: relative;
      top: -2px;
    }
  }
  .top:before {
    content: '';
    position: absolute;
    display: block;
    z-index: 10;
    border-radius: 0 0 15px 15px;
    background-size: 100%;
    top: 44px;
    left: 125px;
    background: url('~@/assets/img/phoneTop.png') no-repeat 50%;
    width: 160px;
    height: 30px;
  }
  .phoneIframe {
    width: 100%;
    height: 528px;
    border-radius: 0 0 30px 30px;
  }
}

</style>